<template>
  <div class="h-100p bg-fff bdr-10 detail">
    <div class="detail-container">
      <v-bill-detail-page :bill="currentBillDetail"/>
      <div v-if="currentBillDetail.orderStatus === 2">
        <v-form-title title="被背书人信息"/>
        <el-form label-width="100px">
          <div class="line-item">
            <el-form-item label="资方账户名">{{currentBillDetail.quotationEmployerName}}</el-form-item>
            <el-form-item label="账号">{{currentBillDetail.capitalAcctNo}}</el-form-item>
          </div>
          <div class="line-item">
            <el-form-item label="开户行">{{currentBillDetail.bankBranchName}}</el-form-item>
            <el-form-item label="开户行行号">{{currentBillDetail.capitalLineNumber}}</el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillDetailPage from '@/components/bill-detail-page'
  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vBillDetailPage, vFormTitle
    }
  })
  export default class Transaction extends Vue {
    id = ''
    currentBillDetail = {}

    async getBillDetail () {
      let res: AjaxResponse = await this.$axios.get(`g/gateway/order/${this.id}`)

      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
          //console.log(this.currentBillDetail.orderStatus)
      }
    }

    mounted () {
      this.id = this.$route.params.id
      this.getBillDetail()
    }
  }
</script>

<style lang="less" scoped>
  .detail {
    overflow-y: scroll;
    padding-top: 40px;
  }

  .detail-container {
    width: 1180px;
    margin: 0 auto;
  }

  .line-item {
    > * {
      width: 49.5%;
      display: inline-block;
    }
  }
</style>
